<template>
  <div class="hello">
    <h1>{{ title }}</h1>
    <ul >
      <li v-for='(article,index) in articles' :key="article.id" > {{ index+1 }} / {{article.rating.average}}/ {{article.title}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'VueResourceComponents2',
  data () {
    return {
      title: '豆瓣电影 排行榜'
    }
  },
  serverRequest (store) {
    return store.dispatch('getMovies')
  },
  // mounted: function () {
  //   this.$http.jsonp('https://api.douban.com/v2/movie/top250?count=50', {}, {
  //     headers: {},
  //     emulateJSON: true
  //   }).then(function (response) {
  //     // 这里是处理正确的回调
  //     this.articles = response.data.subjects
  //     // this.articles = response.data["subjects"] 也可以
  //   }, function (response) {
  //     // 这里是处理错误的回调
  //     console.log(response)
  //   })
  // },
  computed: {
    articles () {
      return this.$store.state.movies
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
a {
  color: #42b983;
}
</style>
